<template>
  <div class="layout">
    <div :class="['menu-box', { 'menu-box-hide': hideMenu }]">
      <div class="menu">
        <Sidebar :list="menu" />
      </div>
    </div>
    <div class="content">
      <v-head index="0" class="header" :lucency="true" />

      <div class="content-container">
        <slot />
      </div>

      <!-- <v-foot class="home-footer" /> -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Sidebar from "./module/sidebar.vue"
export default {
  data() {
    return {
      menu: [],
      hideMenu: false
    }
  },
  props: ["type"],
  computed: mapState({
    isCollapse: state => state.menuStore.isCollapse
  }),
  methods: {
    isActive(e) {
      if (this.$route.meta.affiliation) {
        return e.name == this.$route.meta.affiliation
      } else if (this.$route.meta.nae) {
        return e.name == this.$route.meta.name
      } else {
        return e.path == this.$route.path
      }
    },
    skip(e) {
      let path = e.path
      if (e.children && e.children[0]) {
        path = `${e.path}/lis`
      }
      if (path == this.$route.path) return;
      // let query = {
      //   id: this.$route.query.id
      // }
      this.$router.push({
        path,
        // query,
      });
    }
  },
  mounted() {
    this.menu = this.$router.options.routes.filter(
      (e) => e.affiliation == this.type
    );
  },
  components: { Sidebar }
}
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  background: #F5F5F5;
  box-sizing: border-box;

  .menu-box {
    display: flex;
    height: 100%;
    position: relative;
    transition: all .3s;

    h1 {
      height: 96px;
      width: 248px;
      overflow: hidden;
      transition: all .3s;
    }

    img {
      width: 172px;
      display: block;
      margin: 32px auto 0;
    }

    .cssc {
      width: 120px;
      margin-left: 10px;
    }
  }

  .menu-box-hide {
    margin: 16px 0;

    h1 {
      width: 0;
    }

    .menu {
      width: 0;
    }
  }

  .content {
    flex: 1;
    width: 100%;
    height: calc(100%);
    overflow-y: auto;
    box-sizing: border-box;
    transition: all .5s;
    position: relative;

    .header {
      padding: .625rem 2.5rem;
    }

    .content-container {
      padding: 40px 50px;
      position: absolute;
      top: 58px;
      bottom: 0;
      left: 24px;
      right: 0;

      .layout-content {
        overflow: hidden;
      }
    }

    &::-webkit-scrollbar {
      width: 12px;
    }

    /* 滚动槽 */
    &::-webkit-scrollbar-track {
      box-shadow: inset006pxrgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
      box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0, 0, 0, .06);
    }

    .piston {
      position: absolute;
      // right: -42px;
      left: .625rem;
      top: 16px;
      width: 22px;
      height: 22px;
      background: url(~@/assets/img/piston.png) no-repeat;
      background-size: 22px 22px;
      // transition: all .3s;
    }
  }
}
</style>
